<template>
  <div class="ilearning" ref="ilearningRef">
    <div class="e-text">
      <Teacher v-if="props.stats.ilearning.learningLecturerAll" :ilearning="ilearning" />
      <Student :ilearning="ilearning" />
    </div>
    <img class="e-bg" src="@/assets/img/ilearning/ilearning.jpg" />
  </div>
</template>

<script lang="ts" setup>
import Student from "./Student.vue";
import Teacher from "./Teacher.vue";
// import { useSlide } from "@/hooks/useSlide";
import { ref, watch, defineEmits } from "vue";
import { slideUp, slideDown } from "@/utils/slide";
const props = defineProps<{
  stats: any;
}>();
const ilearning = ref(props.stats.ilearning);
const emit = defineEmits(["slideUp", "slideDown"]);

const ilearningRef = ref<any>(null);

watch(ilearningRef, () => {
  slideUp(ilearningRef.value, () => {
    console.log("event");
    emit("slideUp");
  });
  slideDown(ilearningRef.value, () => {
    emit("slideDown");
  });
});
</script>

<style lang="scss" scoped>
.ilearning {
  @include full-screen-relative;
}

img {
  position: absolute;
}

.e-text {
  @include animation-fade-in;
  position: absolute;
  top: 140px;
  left: 64px;
  z-index: 999;
  padding-right: 64px;
  color: $text-blue1;

  h4 {
    margin: 0;
    margin-bottom: 40px;
    font-size: 48px;
    font-weight: bold;
  }

  // div {
  //   margin-bottom: 20px;


  // }


}

img {
  position: absolute;
}

.e-bg {
  @include animation-scale;
  bottom: 0;
  left: 72px;
  // height: 1083px;
  width: 100vw;
}


p {
  font-size: 24px;
}
</style>
